
require(['./config'], () => {
    require(["jquery", "template", 'header', 'footer'], ($, template, header) => {
        class Shopping {
            constructor() {
                this.render()
                this.allmoney()
                this.checksChange()
                this.setAllChecks()
                this.setChecks()
                this.delete()
                this.shopNum()
                this.allchecked()
                this.addInput()
            }
            render() {
                // 根据localStorage数据渲染页面\
                const card = localStorage.getItem('card')
                // let len = card.length
                // console.log(len)
                // console.log(typeof(card))
                if (card) {
                    this.card = JSON.parse(card)
                    // console.log(typeof(this.card))
                    const html = template('catashop', { card: this.card })
                    $('#addshop').html(html)
                    // console.log(888)
                } else {
                    // 购物车为空
                    // console.log(999)
                    $('#content').hide()
                    $('#empty').show()
                }
            }
            allmoney() {
                // 每次都从0开始算总价,只要做了任何跟价格有关系的直接调用
                let totalMoney = this.card.reduce((total, shop) => {
                    if (shop.checked) {
                        total += shop.price * shop.count
                    }
                    return total
                }, 0)
                $('#allMoney').html(totalMoney)
                this.shopNum()
                // console.log(999)
            }
            shopNum() {
                // const id = $(this).parents('ul').data('id')
                var num =0
                this.card.map(shop => {
                    if (shop.checked) {
                        // 计算商品数量
                        num+=shop.count
                    }
                })
                $('#shopNum').html(num)
            }
            checksChange() {
                const _this = this
                // 单选绑事件
                $('.checks').on('change', function () {
                    // 获取自定义属性的id
                    const id = $(this).parents('div').data('id')
                    // console.log(id)
                    // 把当前数据的checked属性修改为当前选框的状态
                    _this.card = _this.card.map(shop => {
                        if (shop.id === id) shop.checked = $(this).prop('checked')
                        return shop
                    })
                    // 把修改之后的card重新存入localStorage
                    localStorage.setItem('card', JSON.stringify(_this.card))
                    // 重新计算价格
                    _this.allmoney()
                    _this.shopNum()

                })
            }
            setAllChecks() {
                // 下面单个联动上面
                $('.checks').on('change', () => {
                    this.allchecked()
                })
            }
            setChecks() {
                // this.allchecked()
                const _this = this
                // setAllChecks()
                // 上面联动下面
                $('#allCheck').on('change', function () {
                    let Allcheck = $(this).prop('checked')
                    // console.log(Allcheck)
                    $('.checks').prop('checked', Allcheck)
                    _this.card = _this.card.map(shop => {
                        shop.checked = Allcheck
                        return shop
                    })
                    // console.log(_this.card)

                    // 把修改之后的card重新存入localStorage
                    localStorage.setItem('card', JSON.stringify(_this.card))
                    _this.allmoney()
                    _this.shopNum()
                    
                })
            }
            allchecked() {
                // console.log(this.card)
                // 设置全选，遍历 使全选cheched属性和列表一样
                const isAllcheck = this.card.every(shop => {
                    // console.log(shop)
                    return shop.checked
                })
                // console.log(isAllcheck)
                $('#allCheck').prop('checked', isAllcheck)
            }
            delete() {
                const _this = this
                // 删除该类商品
                $('.shopright').on('click', '#del', function () {
                    const id = $(this).parents('ul').data('id')
                    // console.log(id)
                    if (confirm('确定删除吗')) {
                        $(this).parents('.shop').remove()
                        _this.card = _this.card.filter(shop => {
                            return shop.id != id
                        })
                        // console.log( _this.card)
                        // 把修改之后的card重新存进去h
                        localStorage.setItem('card', JSON.stringify(_this.card))
                        // console.log(_this.card.length)
                        if(_this.card.length===0){
                            localStorage.removeItem('card')
                            _this.render()
                            $('#car').html(`(0)`)
                        }
                       
                    }
                     // 重新计算价格
                     _this.allmoney()
                     // 重新计算商品数量
                     _this.shopNum()
                     // 计算购物车数量
                     header.sumshop()
                   
                })

            }
            addInput() {
                const _this = this
                // 加减控制数量变化
                $('.shopright').on('click', '#add', function () {
                    const id = $(this).parents('ul').data('id')
                    var num = $(this).prev().html()
                    num++
                    // console.log(num)
                    // 遍历,使shop.count = num
                    _this.card = _this.card.map(shop => {
                        if(shop.id===id){
                         shop.count = num
                        }
                        return shop
                    })
                    $(this).prev().html(num)
                    localStorage.setItem('card', JSON.stringify(_this.card))
                    _this.allmoney()
                    _this.shopNum()
                    // 计算购物车数量
                    header.sumshop()
                })
                $('.shopright').on('click', '#minus', function () {
                    var num = $(this).next().html()
                    num--
                    if (num < 1) {
                        num = 1
                    }
                    $(this).next().html(num)
                    // console.log(num)
                    // 遍历,使shop.count = num
                    const id = $(this).parents('ul').data('id')
                    _this.card = _this.card.map(shop => {
                        if(shop.id===id) shop.count = num
                        return shop
                    })
                    localStorage.setItem('card', JSON.stringify(_this.card))
                    _this.allmoney()
                    _this.shopNum()
                    // 计算购物车数量
                    header.sumshop()
                })
            }
        }
        new Shopping()
    })
})